<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="js/axios.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/vote.js"></script>
	<link rel="stylesheet" href="css/ele-index.css">
	<script src="js/ele-index.js"></script>
</head>
<body>
<div id="app">
	<myheader></myheader>
	<div id="vote" class="wrap">
		<h2>查看投票</h2>
		<ul class="list">
			<li>
				<h4>{{vote.vname}}</h4>
				<p class="info">共有 {{vote.items.length}} 个选项，
					已有 {{vote.users || 0}} 个网友参与了投票。</p>
				<ol>
					<li v-for="item in vote.items">{{item.iname}}
						<div class="rate">
							<div class="ratebg"><div class="percent" :style="{width:getProgress(item)+'%'}"></div></div>
							<p>{{item.commitSum}}票
								<span>({{getProgress(item)}}%)</span></p>
						</div>
					</li>
				</ol>
				<div class="goback"><a href="index.html">返回投票列表</a></div>
			</li>
		</ul>
	</div>
	<myfooter></myfooter>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			vote : {
				items:[],
			},
		},
		created(){
			// /vote.html?id=1 ==> search => ?id=1
			let id = location.search.replace(/\?id=(\d+)/,"$1");
			axios.get("vote/queryById?id=" + id).then(res=>{
				if (res.data != null){
					this.vote = res.data;
				}
			});
			this.vote.id = id;
		},
		methods:{
			getProgress(item){
				if (item.commitSum){
					return parseInt( item.commitSum / item.itemCount * 100);
				} else {
					return 0;
				}
			}
		}
	})
</script>
</body>
</html>
